import PinyinText from "@/components/PinyinText";
import { Users } from "lucide-react";
import Link from "next/link";

export type CardInfoProps = {
  title: string;
  description: string;
  path: string;
};
export default function Item({ title, description, path }: CardInfoProps) {
  return (
    <Link
    href={path}
    className="flex-1 shrink-0 inlinel-block w-full min-w-0 group p-6 rounded-xl bg-slate-800/50 border border-slate-700 hover:border-emerald-500/50 transition-all"
  >
    <Users className="h-8 w-8 text-emerald-500 mb-4" />
    <h3 className="text-xl font-semibold mb-2 group-hover:text-emerald-400">
    <PinyinText text={title} /></h3>
    <span className="text-slate-400 truncate min-w-0 block"><PinyinText text={description} /></span>
  </Link>
  );
}
